<template>
    <div>
        <div class="info" style="margin-bottom: 30px">
            <div class="left">
                <div class="left_top" style="margin-bottom: 30px">
                    <div class="title_box">用户信息</div>
                    <div class="lable">用户名称：{{ popRow.username }}</div>
                    <div class="lable">用户手机号：{{ popRow.mobile }}</div>
                </div>
                <div class="left_top">
                    <div class="title_box">详情信息</div>
                    <div class="lable">管理中心名称：{{ popRow.admin_name }}</div>
                    <div class="lable">部门名称：{{ popRow.department_name }}</div>
                    <div class="lable">路段名称：{{ popRow.road_name }}</div>
                    <div class="lable">提交时间： {{ popRow.create_time != 0 ? comTime(popRow.create_time) : "" }}</div>
                    <div class="lable">
                        是否有效工单：{{ popRow.is_valid == 1 ? "有效工单" : "无效工单" }}
                    </div>
                    <div v-if="isShow" class="lable" style="display: flex">
                        处理状态：
                        <div :style="{
                color:
                  popRow.cl_status == 0 || popRow.cl_status == 1 || popRow.cl_status == 4
                    ? 'red'
                    : '',
              }">
                            {{
                popRow.cl_status == 0
                  ? "管理中心正在处理中"
                  : popRow.cl_status == 1
                  ? "路网审核中"
                  : popRow.cl_status == 4
                  ? "管理中心提交路网审核中"
                  : "已处理"
              }}
                        </div>
                    </div>
                    <!-- //0中心处理1路网审核2处理完成3处理失败4处理不了提交路网 -->
                </div>
            </div>
            <div class="right">
                <div class="leftbox">
                    <div class="leftbox_item">
                        <div class="right_title">反馈内容</div>
                        <div>{{ popRow.content }}</div>
                    </div>
                    <div class="leftbox_item">
                        <div class="right_title">反馈图片</div>
                        <div class="imgs">
                            <div v-for="(item, index) in imgs" :key="index" style="margin-right: 10px">
                                <el-image :preview-src-list="[item]" :src="item" v-if="item" style="width: 80px; height: 80px" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="leftbox">
                    <div class="leftbox_item">
                        <div class="right_title">回复内容</div>
                        <div>{{ popRow.reply }}</div>
                    </div>
                    <div class="leftbox_item">
                        <div class="right_title">回复图片</div>
                        <div class="imgs">
                            <div v-for="(item, index) in popRow.reply_img" :key="index" style="margin-right: 10px">
                                <el-image :preview-src-list="[item]" :src="item" v-if="item" style="width: 80px; height: 80px" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="title">答题详情</div>
            <div class="type" v-for="item in answer" :key="item.id">
                <div>{{ item.name }}</div>
                <div v-for="item1 in item.subject" :key="item1.id">
                    <div>
                        <div class="type_name">
                            {{ item1.name }}
                        </div>
                        <div v-for="item2 in item1.option" :key="item2.id">
                            <div>
                                <el-radio-group v-model="item2.is_checked">
                                    <el-radio disabled :label="2">{{ item2.option_name }}</el-radio>
                                </el-radio-group>
                            </div>
                            <div v-if="item2.is_checked == 2" style="margin: 0 40px">
                                <div v-for="i in item2.options" :key="i.id">
                                    <el-radio-group v-model="i.is_checked">
                                        <!-- i.option_name -->
                                        <el-radio disabled :label="2">{{ i.option_name }}&nbsp;
                                            <span v-if="i.desc">({{ i.desc ? i.desc : "" }})</span></el-radio>
                                    </el-radio-group>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        popRow: {
            type: Object,
            default: () => { },
        },
        answer: {
            type: Array,
            default: () => [],
        },
        imgs: {
            type: Array,
            default: () => [],
        },
        isShow: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            activeNames: ["1"],
        };
    },
    methods: {},
    computed: {
        comTime() {
            return (value) => {
                var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var year = date.getFullYear();
                var month = ("0" + (date.getMonth() + 1)).slice(-2);
                var sdate = ("0" + date.getDate()).slice(-2);
                var hour = ("0" + date.getHours()).slice(-2);
                var minute = ("0" + date.getMinutes()).slice(-2);
                var second = ("0" + date.getSeconds()).slice(-2);
                // 拼接
                var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute; //+ ":" + second;
                // 返回
                return result;
            };
        },
    }
};
</script>

<style lang="scss" scoped>
.info {
    display: flex;
    justify-content: space-between;

    .left {
        width: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .left_top {
            width: 100%;
            padding: 20px;
            background: #ffffff;
            box-shadow: inset 0px 3px 12px 1px rgba(180, 240, 255, 0.6);
            border-radius: 15px;
            position: relative;

            .title_box {
                font-size: 16px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                display: inline-block;
                padding: 5px 15px;
                color: #ffffff;
                box-sizing: border-box;
                white-space: nowrap;
                border-radius: 6px;
                background: #409eff;
                position: absolute;
                left: 50%;
                transform: translate(-50%, calc(-50% - 20px));
            }

            .lable {
                font-size: 16px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #222222;
                line-height: 1.8em;
            }
        }
    }

    .right {
        width: 60%;
        // min-height: 200px;
        background: #ffffff;
        box-shadow: inset 0px 3px 12px 1px rgba(180, 240, 255, 0.6);
        border-radius: 15px;
        padding: 30px;
        display: flex;
        flex-direction: column;
        height: 100%;

        .leftbox {
            width: 100%;
            min-height: 150px;
            display: flex;
            flex-shrink: 0;
            gap: 0 15px;

            .leftbox_item {
                width: 50%;
                height: auto;
            }

            .right_title {
                font-size: 20px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #222222;
            }

            .imgs {
                display: flex;

                flex-wrap: wrap;
            }
        }
    }
}
.title {
    line-height: 24px;
    font-size: 18px;
    color: #222 !important;
    padding: 20px 20px 10px 0;
    font-family: PingFang SC;
    -webkit-font-smoothing: antialiased;
}
.type {
    font-size: 25px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #1067b5;
    margin-top: 40px;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;

    .type_name {
        background: linear-gradient(90deg, #cae4ff, #ffffff);
        border-radius: 10px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #222222;
        padding: 14px;
        margin-top: 20px;
        margin-bottom: 10px;
    }
}

::v-deep .is-checked > .el-radio__label {
    color: #409eff !important;
}

::v-deep .is-checked > .el-radio__inner {
    color: #409eff !important;
    background-color: #409eff !important;
    border-color: #e4e7ed !important;
}

::v-deep .el-date-editor {
    width: 100%;
}

::v-deep .cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

::v-deep .cell div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

::v-deep .el-collapse-item__content {
    padding: 0;
}

::v-deep .el-collapse {
    box-sizing: border-box;
    background: #fff;
}
</style>
